<template>
	<div class="classic">
		<div class="header">
			<vEpsoide class="epsoide" :index="classic.index"></vEpsoide>
			<div class="like-container">
				<vLike :like="likeStatus" :count="likeCount" @like="onLike"></vLike>
			</div>
		</div>
		<vMovie v-if="classic.type==100" :img="classic.image" :content="classic.content"></vMovie>
		<vMusic v-if="classic.type==200" :img="classic.image" :content="classic.content" :src="classic.url"></vMusic>
		<vEssay v-if="classic.type==300" :img="classic.image" :content="classic.content"></vEssay>
		<vNavi class="navi" :title="classic.title" :first="first" :latest="latest" @left="onNext" @right="onPrevious"></vNavi>
		<Tab></Tab>
	</div>
</template>

<script>
//预设data不能为null，会报错
//组件@click，要触发原生事件要加@click.native
import Tab from '../components/tab/tab.vue'
import {ClassicModel} from '../models/classic.js'
import {LikeModel} from '../models/like.js'
let classicModel=new ClassicModel()
let likeModel=new LikeModel()
import vLike from '../components/like/like.vue'
import vEpsoide from '../components/epsoide/epsoide.vue'
import vMovie from '../components/classic/movie/movie.vue'
import vNavi from '../components/navi/navi.vue'
import vMusic from '../components/classic/music/music.vue'
import vEssay from '../components/classic/essay/essay.vue'
export default{
	name:'classicPage',
	data(){
		return{
			classic:{}, 
			likeStatus:false,
			likeCount:0,
			first:false,
			latest:true,
			latestIndex:0
		}
	},
	components:{
		Tab,vLike,vMovie,vEpsoide,vNavi,vMusic,vEssay
	},
	created(){
		classicModel.getLatest().then(res=>{
			this.classic=res.data
			this.likeCount=res.data.fav_nums
			this.latestIndex=res.data.index
			localStorage.setItem(`classic${res.data.index}`,JSON.stringify(res.data))
			res.data.like_status==0?this.likeStatus=false:this.likeStatus=true
		})
	},
	mounted(){

	},
	methods:{
		onLike(e){
			console.log(e.behavior)
			likeModel.like(e.behavior,this.classic.id,this.classic.type).then(res=>{
				console.log(res)
			})
		},
		onNext(){
			let classicKey=localStorage.getItem(`classic${this.classic.index+1}`)
			this.first=false
			if(!classicKey){
				classicModel.getNext(this.classic.index).then(res=>{
					console.log(res)
					this.classic=res.data
					this._getLikeStatus(this.classic.id,this.classic.type)
					res.data.index==this.latestIndex?this.latest=true:this.latest=false
				})
			}else{
				this.classic=JSON.parse(classicKey)
				this._getLikeStatus(this.classic.id,this.classic.type)
				this.classic.index==this.latestIndex?this.latest=true:this.latest=false
			}
		},
		onPrevious(){
			let classicKey=localStorage.getItem(`classic${this.classic.index-1}`)
			this.latest=false
			if(!classicKey){
				classicModel.getPrevious(this.classic.index).then(res=>{
					console.log(res)
					this.classic=res.data
					this._getLikeStatus(this.classic.id,this.classic.type)
					localStorage.setItem(`classic${res.data.index}`,JSON.stringify(res.data))
					res.data.index==1?this.first=true:this.first=false
				})
			}else{
				this.classic=JSON.parse(classicKey)
				this._getLikeStatus(this.classic.id,this.classic.type)
				this.classic.index==1?this.first=true:this.first=false
			}
		},
		_getLikeStatus(artID,category){
			likeModel.getClassicLikeStatus(artID,category).then(res=>{
				console.log(res.data)
				res.data.like_status==1?this.likeStatus=true:this.likeStatus=false
				this.likeCount=res.data.fav_nums
			})
		}
	
	}

}
</script>
<style lang="stylus" scoped>
.classic{position:absolute;left:0;top:0;right:0;bottom:51px;overflow:hidden;width:100%;display: flex;flex-direction: column;align-items: center;}
.header{display: flex;flex-direction: row;height:50px;align-items: center;justify-content: space-between;border-bottom:1px solid #f5f5f5;width:100%;}
.like-container{display: flex;flex-direction: row;justify-content: space-between;align-items: center;margin-right:30rpx;}

.epsoide{margin-left:10px;margin-top:2px;}
.navi{position: absolute;bottom:20px;}

</style>